<template>
    <div id="earth" style="width: 100%;height: 100%;"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import 'echarts-gl'
import { onMounted } from 'vue';
function setconfig() {
    const chartDom = document.getElementById('earth')
    const myChart = echarts.init(chartDom)
    myChart.setOption({
        globe: {
            baseTexture: 'https://images-1308194867.cos.ap-beijing.myqcloud.com/images/home/world.jpg', //地球的纹理。支持图片路径的字符  串，图片或者 Canvas 的对象
            shading: 'lambert', //地球中三维图形的着色效果
            atmosphere: {
                show: true, //显示大气层
                offset: 8,
                color: '#13315E'
            },
            light: {
                ambient: {
                    intensity: 0.8 //环境光源强度
                }, //环境光
                main: {
                    intensity: 0.2 //光源强度
                }
            },
            viewControl: {
                autoRotate: true, // 是否开启视角绕物体的自动旋转查看
                autoRotateSpeed: 3, //物体自转的速度,单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
                autoRotateAfterStill: 2, // 在鼠标静止操作后恢复自动旋转的时间间隔,默认 3s
                rotateSensitivity: 2, // 旋转操作的灵敏度，值越大越灵敏.设置为0后无法旋转。[1, 0]只能横向旋转.[0, 1]只能纵向旋转
                targetCoord: [116.46, 39.92], // 定位到北京
                maxDistance: 200,
                minDistance: 200
            }
        }
    });
    return myChart;
}
onMounted(() => {
    var myChart = setconfig();
    window.addEventListener("resize", () => {
        myChart.resize();
    });
});

</script>